<template>
	<view class="page-index">
		<!-- 位置区域弹出层 -->
		<uni-popup ref="regionPopup" type="bottom" class='uni-popup' :safe-area='false' @touchmove.stop.prevent="">
			<view class="typePopup">
				<view class="title-box">
					<view class="">
					</view>
					<view class="title">
						位置
					</view>
					<view class="confirm">
						<u-icon name="close" color="#000000" size="20" @click='close()'></u-icon>
					</view>
				</view>
				<view class="content">
					<view class="item-box">
						<view :class="[item.id == form.areas_id ? 'selected' : 'item']" v-for="(item,index) in selectList.areas" :key="index" @click="regionClick(item)">
							{{item.title}}
						</view>
					</view>
				</view>

			</view>
		</uni-popup>
		<!-- 房源类型弹出层 -->
		<uni-popup ref="typePopup" type="bottom" class='uni-popup' :safe-area='false' @touchmove.stop.prevent="">
			<view class="typePopup">
				<view class="title-box">
					<view class="">
					</view>
					<view class="title">
						房源类型
					</view>
					<view class="confirm">
						<u-icon name="close" color="#000000" size="20" @click='close()'></u-icon>
					</view>
				</view>
				<view class="content">
					<view class="title">
						
					</view>
					<view class="item-box">
						<view :class="[item.id == form.tentype_id ? 'selected' : 'item']" v-for="(item,index) in selectList.tentype2" :key="index" @click="typeClick(item)" @touchmove.stop.prevent="">
							{{item.title}}
						</view>
					</view>
				</view>

			</view>
		</uni-popup>
		<!-- 租金范围弹出层 -->
		<uni-popup ref="rentPopup" type="bottom" class='uni-popup' :safe-area='false' v-if="form.tentype_id!=5">
			<view class="typePopup">
				<view class="title-box">
					<view class="">
					</view>
					<view class="title">
						价格范围
					</view>
					<view class="confirm">
						<u-icon name="close" color="#000000" size="20" @click='close()'></u-icon>
					</view>
				</view>
				<view class="content">
					<view class="item-box">
						<view :class="[item.id == form.rent_id ? 'selected' : 'item']" v-for="(item,index) in selectList.rent2" :key="index" @click="rentClick(item)" @touchmove.stop.prevent="">
							{{item.title}}
						</view>
					</view>
				</view>

			</view>
		</uni-popup>
		<uni-popup ref="rentPopup" type="bottom" class='uni-popup' :safe-area='false' v-if="form.tentype_id==5">
			<view class="typePopup">
				<view class="title-box">
					<view class="">
					</view>
					<view class="title">
						价格范围
					</view>
					<view class="confirm">
						<u-icon name="close" color="#000000" size="20" @click='close()'></u-icon>
					</view>
				</view>
				<view class="content">
					<view class="item-box">
						<view :class="[item.id == form.rent_id ? 'selected' : 'item']" v-for="(item,index) in selectList.rent3" :key="index" @click="rentClick(item)" @touchmove.stop.prevent="">
							{{item.title}}
						</view>
					</view>
				</view>

			</view>
		</uni-popup>
		<!-- 筛选弹出层 -->
		<uni-popup ref="screenPopup" type="bottom" class='uni-popups' :safe-area='false' @touchmove.stop.prevent="">
			<scroll-view class="typePopup" scroll-y="true" style="padding: 32rpx 0 0;">
				<view class="title-box" style="padding: 0 40rpx;">
					<!-- 					<view class="">
					</view> -->
					<view class="title">
						筛选
					</view>
					<!-- 					<view class="confirm" @click="confirm()">
						确定
					</view> -->
				</view>
				<view class="content" style="padding: 0 40rpx 160rpx; ">
					<view class="title">
						户型
					</view>
					<view class="item-box">
						<view :class="[form.size_id.indexOf(item.id) > -1 ? 'selected' : 'item']" v-for="(item,index) in selectList.size" :key="index" @click="sizeClick(item)">
							{{item.title}}
						</view>
					</view>
					<!-- 					<view class="title" style="margin-top: 32rpx;">
						房源特色（可多选）
					</view>
					<view class="item-box">
						<view :class="[form.configure_id.indexOf(item.id) > -1 ? 'selected' : 'item']" v-for="(item,index) in selectList.configure" :key="index" @click="screenClick(item)">
							{{item.title}}
						</view>
					</view> -->

				</view>
			</scroll-view>
			<view class="position-box">
				<view class="box">
					<view class="Reset" @click="reset()">
						重置
					</view>
					<view class="enter" @click="confirm()">
						确定
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import * as index from '@/api/index.js'
	export default {
		name: "popup",
		data() {
			return {
				default: {
					"id": 0,
					"title": "不限"
				},
				form: {
					tentype_id: 0, //房屋类型ID
					areas_id: 0, //位置区域ID
					rent_id: 0, //租金范围ID
					configure_id: [0], //筛选ID数组
					page: 1,
					size_id: [0],
				},
				selectList: []
			};
		},
		mounted() {
			index.getSelect().then(res => {
				this.selectList = res.data
				this.selectList.areas.unshift(this.default)
				this.selectList.tentype2.unshift(this.default)
				this.selectList.rent2.unshift(this.default)
				this.selectList.configure.unshift(this.default)
				this.selectList.size.unshift(this.default)
			})
			this.types()
		},
		methods: {
			types() {
				if (uni.getStorageSync('types')) {
					let type = uni.getStorageSync('types')
					this.typeClick(type)
					// uni.$emit('formSearch',this.form)
					// this.confirm()
				}
			},
			// 位置区域点击事件
			regionOpen() {
				this.$refs.regionPopup.open('bottom')
			},
			regionClick(item) {
				this.form.areas_id = item.id
				uni.$emit('areass', item.title)
				this.confirm()
			},
			//房源类型点击事件
			typeOpen() {
				this.$refs.typePopup.open('bottom')
			},
			typeClick(item) {
				this.form.tentype_id = item.id
				uni.$emit('tentypes', item.title)
				this.confirm()
			},
			//租金范围点击事件
			rentOpen() {
				this.$refs.rentPopup.open('bottom')
			},
			rentClick(item) {
				this.form.rent_id = item.id
				uni.$emit('rents', item.title)
				this.confirm()
			},
			//筛选点击事件
			screenOpen() {
				this.$refs.screenPopup.open('bottom')
			},
			screenClick(item) {
				if (this.form.configure_id.indexOf(item.id) < 0) {
					this.form.configure_id.push(item.id)
					if (item.id == 0) {
						this.form.configure_id = []
						this.form.configure_id.push(0)
						// this.title.screen = '已筛选'
					} else {
						this.removeByValue(this.form.configure_id, 0)
					}
				} else {
					this.removeByValue(this.form.configure_id, item.id)
				}
			},
			sizeClick(item) {
				if (this.form.size_id.indexOf(item.id) < 0) {
					this.form.size_id.push(item.id)
					if (item.id == 0) {
						this.form.size_id = []
						this.form.size_id.push(0)
						// this.title.screen = '已筛选'
					} else {
						this.removeByValue(this.form.size_id, 0)
					}
				} else {
					this.removeByValue(this.form.size_id, item.id)
				}
			},
			removeByValue(arr, val) {
				for (var i = 0; i < arr.length; i++) {
					if (arr[i] == val) {
						arr.splice(i, 1);
						break;
					}
				}
			},
			close() {
				this.$refs.regionPopup.close()
				this.$refs.typePopup.close()
				this.$refs.rentPopup.close()
				this.$refs.screenPopup.close()
			},
			//点击确定
			confirm() {
				this.$refs.regionPopup.close()
				this.$refs.typePopup.close()
				this.$refs.rentPopup.close()
				this.$refs.screenPopup.close()
				uni.$emit('formSearch', this.form)
				// uni.$emit('title',this.titles)
			},
			reset() {
				this.form.size_id = [0]
				this.form.configure_id = [0]
			}
		}
	}
</script>

<style scoped lang="scss">
	.vue-ref {
		padding-bottom: 0 !important;
	}

	.page-index {
		.uni-popup {
			.typePopup {
				z-index: 1000000000000000000000000;
				height: 970rpx;
				background: #ffffff;
				border-radius: 40rpx 40rpx 0 0;
				padding: 32rpx 40rpx 0;

				.title-box {
					display: flex;
					justify-content: space-between;

					.title {
						font-size: 32rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 700;
						color: #202020;
					}

					.confirm {
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						color: #3C71FF;
					}
				}

				.item-box {
					display: flex;
					justify-content: flex-start;
					flex-wrap: wrap;

					.item {
						margin-left: 15rpx;
						width: 204rpx;
						height: 80rpx;
						line-height: 80rpx;
						text-align: center;
						background: #F7F7F7;
						border-radius: 16rpx;
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						color: #333333;
						margin-top: 32rpx;
					}

					.selected {
						margin-left: 15rpx;
						width: 204rpx;
						height: 80rpx;
						line-height: 80rpx;
						text-align: center;
						background: #006FD0;
						border-radius: 16rpx;
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						color: #FFFFFF;
						margin-top: 32rpx;
					}
				}
			}
		}

		.uni-popups {
			position: relative;

			.position-box {
				position: absolute;
				bottom: 0;
				height: 146rpx;
				width: 100%;
				background: #ffffff;

				.box {
					width: 100%;
					height: 100%;
					display: flex;
					justify-content: space-around;
					padding-top: 10rpx;

					.Reset {
						height: 82rpx;
						width: 312rpx;
						text-align: center;
						line-height: 82rpx;
						color: #006fd0;
						border: 1rpx solid #006fd0;
						border-radius: 16rpx;
					}

					.enter {
						height: 82rpx;
						width: 312rpx;
						text-align: center;
						line-height: 82rpx;
						background: #006fd0;
						border-radius: 16rpx;
						color: #ffffff;
					}
				}
			}

			.typePopup {
				z-index: 1000000000000000000000000;
				height: 970rpx;
				background: #ffffff;
				border-radius: 40rpx 40rpx 0 0;
				padding: 32rpx 40rpx 0;

				.title-box {
					display: flex;
					justify-content: space-around;

					.title {
						font-size: 32rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 700;
						color: #202020;
					}

					.confirm {
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						color: #3C71FF;
					}
				}

				.item-box {
					display: flex;
					justify-content: flex-start;
					flex-wrap: wrap;

					.item {
						margin-left: 15rpx;
						width: 204rpx;
						height: 80rpx;
						line-height: 80rpx;
						text-align: center;
						background: #F7F7F7;
						border-radius: 16rpx;
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						color: #333333;
						margin-top: 32rpx;
					}

					.selected {
						margin-left: 15rpx;
						width: 204rpx;
						height: 80rpx;
						line-height: 80rpx;
						text-align: center;
						background: #006FD0;
						border-radius: 16rpx;
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						color: #FFFFFF;
						margin-top: 32rpx;
					}
				}

			}

		}
	}
</style>
